* {
    margin: 0;
    padding: 0;
}
/*主题*/
.container{
    width: 1200px;
    margin: 0 auto;
}
/*时间线*/
.timeline{
    height: 60px;
    width: 100%;
    margin: 40px 0;
    text-align: center;
}

.timeline .step {
    float: left;
    width: 25%;
}

.timeline .step-num {
    color: #fff;
    font-size: 12px;
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 10px;
    text-align: center;
    background-color: #ffd8d7;
    position: relative;
    top: 10px;
}
.timeline .done .step-num {
    background-color: #f03d37;
}
.timeline .line {
    width: 100%;
    height: 4px;
    background: #ffd8d7;
}

.firstline{
    width: 100%;
    height: 4px;
    background: linear-gradient(to right,white 50%, #f03d37 50%);
}
.secondline{
    width: 100%;
    height: 4px;
    background: linear-gradient(to right,#f03d37 50%, #f03d37 50%);
}
.thirdline{
    width: 100%;
    height: 4px;
    background: linear-gradient(to right,#ffd8d7 50%, #ffd8d7 50%);
}
.lastline{
    width: 100%;
    height: 4px;
    background: linear-gradient(to right,#ffd8d7 50%, white 50%);
}


.timeline .step-text {
    font-size: 14px;
    color: #999;
    display: inline-block;
    margin-top: 10px;
    display: block;
}

.timeline .done .step-text {
    color: #f03d37;
}



/*选座部分*/
.main {
    width: 100%;
    border: 1px solid #e5e5e5;
    font-size: 0;
}
/*左边大厅*/
.hall {
    width: 820px;
    display: inline-block;
    vertical-align: top;
}

.hall .seattype {
    margin: 30px 0 30px 210px;
}
.example {
    display: inline-block;
    font-size: 16px;
    color: #666;
    height: 30px;
    line-height: 30px;
    padding-left: 38px;
    background-repeat: no-repeat;
    margin-right: 50px;
}

/*//大厅主要部分*/
.main .hall .container{
    width: 100%;
    font-size: 0;
    overflow: hidden;
    white-space: nowrap;
}
.selectable{
    background-image: url("../../images/cinema/座位.svg")
    /*background-color: black;*/
}
.sold{
    background-image: url("../../images/cinema/已售.svg")
    /*background-color: black;*/
}
.chosen{
    background-image: url("../../images/cinema/已选.svg")
    /*background-color: black;*/
}
.screen{
    width: 574px;
    height: 39px;
    background-image: url("../../images/cinema/荧幕.png");
    margin: 0 auto;
}
.row{
    margin-top: 10px;
}
.seat{
    display: inline-block;
    margin: 0 5px 0 5px;
    height: 30px;
    width: 30px;
}
.box{
    width: 100%;
    height: 100%;
}
.box .seats-row{
    display: inline-block;
    width: 40px;
    height: 320px;
    vertical-align: top;
    margin-top: 60px;
}
.box .seats-row .colnum{
    width: 100%;
    height: 40px;
    font-size: 15px;
    text-align: center;
    line-height: 60px;
}

.box .seats{
    display: inline-block;
    width: 400px;
    height: 320px;
    margin:  60px 210px auto 170px;

}
/*右边信息*/
.side {
    width: 340px;
    height: 600px;
    background-color: #f9f9f9;
    padding: 20px;
    display: inline-block;
}
.side .movie-info{
    width: 100%;
    height: 170px;
}
.side .movie-info .poster {
    width: 115px;
    height: 158px;
    border: 2px solid #fff;
    box-shadow: 0 2px 7px 0;
    float: left;
}
.side .movie-info .content {
    margin-left: 140px;
}
.side .movie-info .content .name {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin: 0 0 14px;
}
.side .info-item {
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

.side .info-item .value {
    color: #151515;
    margin-left: 2px;
}

.side .show-info {
    margin-top: 20px;
}

.side .info-item {
    font-size: 12px;
    color: #999;
    margin-bottom: 9px;
}
.side .show-info .info-item .value {
    width: 85%;
}
.side .show-info .info-item>span {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
}
.text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.side .ticket-info {
    padding: 20px 0 10px;
    border-top: 1px dashed #e5e5e5;
    border-bottom: 1px dashed #e5e5e5;
}
.side .ticket-info .text {
    font-size: 14px;
    color: #999;
    float: left;
}

.side .ticket-info .ticket-container {
    margin-left: 42px;
    margin-bottom: 20px;
    position: relative;
    top: -5px;
}

.side .ticket-info .ticket {
    cursor: default;
    position: relative;
    font-size: 12px;
    color: #f03d37;
    display: inline-block;
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 0 12px 10px 0;
}


